<template>
  <el-card class="box-card">
    <template #header>
      <el-row type="flex" justify="end">
        <el-button type="primary" size="small" @click="addFn">添加角色</el-button>
      </el-row>
    </template>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column label="角色名称" prop="title" />
      <el-table-column label="角色描述" prop="description" />
      <el-table-column label="操作">
        <template v-slot="{row}">
          <el-button size="small" type="primary" @click="assignPerm(row.id)">分配权限</el-button>
          <el-button size="small" @click="editFn(row.id)">编辑</el-button>
          <el-button size="small" type="danger" @click="delFn(row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 以下放弹窗组件 -->
    <addDialog ref="roleDom" :dialog-visible.sync="showDialog" @updateEvent="initRolesList" />
    <!-- 以下放分配权限弹窗组件 -->
    <AssignPerm ref="perm" :show-dialog.sync="showPermDialog" />
    <!-- 分页放下面 -->
    <el-row type="flex" justify="center">
      <el-pagination
        :page-size="limit"
        layout="total, prev, pager, next"
        :total="total"
        @current-change="currentChange"
      />
    </el-row>
  </el-card>
</template>

<script>
// 引入分配权限的弹窗组件
import AssignPerm from './components/assignPerm.vue'
// 引入弹窗组件
import addDialog from './components/addDialog.vue'
import { getRolesList, getRoleDetail, delRoles, getRolesSum } from '@/api/roles'
export default {
  components: {
    addDialog, AssignPerm
  },
  data() {
    return {
      tableData: [],
      showDialog: false,
      total: 0,
      limit: 5,
      start: 0,
      showPermDialog: false

    }
  },
  async created() {
    // 获取总角色数量
    const res = await getRolesSum()
    console.log(55, res)
    this.total = res.data

    this.initRolesList()
  },
  methods: {
    async initRolesList() {
      const res = await getRolesList({
        _limit: this.limit,
        _start: this.start
      })
      // console.log(32, res)
      this.tableData = res.data
    },
    // 点击新增显示弹窗
    addFn() {
      this.showDialog = true
    },
    // 点击编辑显示弹窗
    async editFn(id) {
      this.showDialog = true
      // 添加加载效果
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0,0,0,0.7)',
        body: true
      })
      // 调用接口，获取详情角色
      const res = await getRoleDetail(id)
      console.log('拿到的编辑回显数据', res)
      this.$refs.roleDom.roleForm = res.data
      // 请求结束，关闭加载效果
      loading.close()
    },
    // 删除角色
    delFn(id) {
      this.$confirm('是否删除该角色?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async() => {
          await delRoles(id)
          // this.$message.success('删除成功！')
          // 重新渲染
          this.initRolesList()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 分页器触发改变
    currentChange(curpage) {
      console.log('当前点击的页码', curpage)
      this.start = curpage === 1 ? 0 : (curpage - 1) * this.limit
      this.initRolesList()
    },
    // 分配权限
    assignPerm(id) {
      this.showPermDialog = true
      this.$refs.perm.getPermIds(id)
    }

  }
}
</script>

<style lang="scss">
.el-card {
  margin: 20px;
}
.el-loading-mask.is-fullscreen{
  z-index: 999999 !important;
}
.el-pagination{
  margin-top: 20px;

}
</style>
